<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选卡页面</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <script src="/bootstrap/js/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="/angularjs/pagination.css">
    <script src="/angularjs/angular.min.js"></script>
    <script src="/angularjs/pagination.js"></script>

    <link rel="stylesheet" href="/layer/layer/theme/default/layer.css">
    <script src="/layer/layer/layer.js"></script>

</head>

<script>
    var app = angular.module('myapp', []);
    app.controller('controller', function ($scope, $http) {
        //查询数据并展示
        $scope.search = function () {

            $http.get("/creditType/getcardtype").success(function (data) {
                $scope.cardtypelist = data;
            })
        };
        //切换显示不同卡的内容
        $scope.test1 = function () {
            $("#detail1").show("true");
            $("#detail0").hide("true");
            $("#detail2").hide("true");


        };
        $scope.test2 = function () {
            alert(data);

            $("#detail1").hide("true");
            $("#detail0").hide("true");
            $("#detail2").show("true");


        };
        $scope.test0 = function () {

            $("#detail1").hide("true");
            $("#detail0").show("true");
            $("#detail2").hide("true");

        };

    })


</script>
<body ng-app="myapp" ng-controller="controller" ng-init="search()">

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading"><h1>请选择你要申请的卡</h1></div>
        <div class="panel-body">
            <!------------------------循环输出卡的类型和选择页面-------------------------------------------->
            <div class="lie text-center col-sm-6 col-md-4" style="float: right" ng-repeat="card in cardtypelist">
                <div class="product-grid">
                    <div class="product-image">

                        <img class="pic-1" src="/img/{{card.creditcardImg}}" style="width: 160px; height: 120px">

                    </div>
                    <div class="product-content">
                        选择 <input type="radio" name="radio" onclick="savetype()"
                                  value="{{card.typeid}}">

                    </div>
                </div>
            </div>
            <!--------------------------------结束循环---------------------------------------------------->


            <div class="panelbox">
                <div class="row" ng-repeat="card in cardtypelist">
                    <div class="line" id="{{$index}}" style="display: none">
                        <div class="lie">

                            <div class="col-md-4 col-sm-6">
                                <div class="product-grid">
                                    <div class="product-image">
                                        <img class="pic-1" src="/img/{{card.creditcardImg}}" alt="普卡"
                                             style="width: 320px; height: 200px ">
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="lie">
                            <div class="text-center " id="detail{{$index}}">
                                <p style="color: black ;font-size: x-large"><span>门槛:</span>{{card.applyStandard
                                    }}</p>
                                <h3> 当月最大可透支额度:{{card.cardLimit}}万</h3>
                                <h3 class="title">
                                    <p>{{card.typename}}
                                    <p>
                                </h3>

                            </div>
                            <table style="background-color: #9d9d9d"
                                   class="table table-responsive  table-striped table-condensed table-bordered text-center">
                                <tr style="background-color: #4cae4c">
                                    <td colspan="12" style="font-size: xx-large">分期利率表</td>
                                </tr>
                                <tr>
                                    <td>分期数</td>
                                    <td>3期</td>
                                    <td>6期</td>
                                    <td>9期</td>
                                    <td>12期</td>
                                    <td>18期</td>
                                    <td>24期</td>
                                </tr>
                                <tr>
                                    <td>还款利息</td>
                                    <td>{{card.threeStage}}</td>
                                    <td>{{card.sixStage}}</td>
                                    <td>{{card.nineStage}}</td>
                                    <td>{{card.twelveStage}}</td>
                                    <td>{{card.eighteenStage}}</td>
                                    <td>{{card.twentyfourStage}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


            <div style="float: right">
                <a style="display: none" class=" btn  btn-block btn-sm btn-success text-center" id="go"
                   href="/shenqin/tojibenxinxi">马上申请
                </a></div>
        </div>
        <div class="panel-footer inline ">
            <div class="panel-group">
                <div><h6 style="color: black;">如有疑问或想咨询更多细节 可以点击<a style="color: blue">详情</a>获取
                    <br>
                    或者致电我们人工客服:110</h6></div>
                <div style="float: right ;top: -100px">
                    &copy;太阳系银行地球分行亚洲第一分行深圳行
                </div>
            </div>
        </div>
    </div>

</div>


</body>
</html>

<script>
    function savetype() {
        var a = $("input[name='radio']:checked").val();
        localStorage.setItem("typeid", a)
        if (a == 1) {
            document.getElementById(1).style.display = 'none';
            document.getElementById(2).style.display = 'none';
            document.getElementById(0).style.display = 'block';
            document.getElementById("go").style.display = 'block';

        } else if (a == 2) {
            document.getElementById(0).style.display = 'none';
            document.getElementById(2).style.display = 'none';
            document.getElementById(1).style.display = 'block';
            document.getElementById("go").style.display = 'block';

        } else if (a == 3) {
            document.getElementById(1).style.display = 'none';
            document.getElementById(0).style.display = 'none';
            document.getElementById(2).style.display = 'block';
            document.getElementById("go").style.display = 'block';

        }


    }


</script>